<template>
  <!-- 用户列表  -->
  <div>
    <page-header-wrapper />
    <a-card style="margin-top: 10px" :loading="loading">
      <a-select
        show-search
        :value="searchForm.user_group_id"
        placeholder="请输入用户组名称"
        style="width:220px; margin-right: 20px"
        :default-active-first-option="false"
        :filter-option="false"
        :not-found-content="null"
        @search="getUserGroupListInfo"
        @change="handleChange"
      >
        <a-select-option v-for="item in userGroupItems" :key="item.user_group_id">
          {{ item.user_group_name }}
        </a-select-option>
      </a-select>
      <a-input-search placeholder="请输入用户名" v-model="searchForm.user_name" @search="search('getUserListInfo')" style="width: 240px; margin-bottom: 10px" />
      <a-table
        :columns="columns"
        :data-source="data"
        bordered
        :rowKey="record=>record.uid"
        :pagination="pagination"
      >
        <template
          slot="user_name"
          slot-scope="text, record"
        >
          <div>
            {{ text }}
            <a-tag color="#87d068" v-if="userInfo.user_name === text && record.role !== 'user'">本账号</a-tag>
          </div>
        </template>
        <template
          slot="avatar"
          slot-scope="text"
        >
          <div><img :src="`${BASE_URL}/community/tool/get_file/${text}`" :alt="text" style="width: 60px" /></div>
        </template>
        <template
          slot="status"
          slot-scope="text"
        >
          <div>
            {{ status[text] }}
          </div>
        </template>
        <template slot="operation" slot-scope="text, record">
          <template v-if="(userInfo.user_name !== record.user_name || userInfo.user_group_id !== record.user_group_id) || userInfo.role === 'superAdmin'">
            <a @click="showDrawer(record)" style="float: left; margin-right: 10px;">授权管理</a>
            <div class="editable-row-operations">
              <a-popconfirm :title="`确定${parseInt(record.status) === 1 ? '封禁' : '解禁'}该用户？`" @confirm="() => _changeUserStatus(record)">
                <a>{{ parseInt(record.status) === 1 ? '封禁' : '解禁' }}</a>
              </a-popconfirm>
            </div>
          </template>
          <template v-else>禁止编辑 同用户组或当前账户无法编辑</template>
        </template>
      </a-table>
    </a-card>
    <a-drawer
      :title="$t('form.basic-form.add.authorization')"
      :width="720"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <user-role-drawer
        :parent="this"
        :change-info="userData"
        @close="onClose"
      />
    </a-drawer>
  </div>
</template>

<script>
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
import userRoleDrawer from './components/UserRoleDrawer'
import {
  getUserList,
  getUserGroupList,
  changeUserStatus
} from '@/api/user'

const columns = [
  {
    title: 'uid',
    dataIndex: 'uid',
    width: '6%',
    scopedSlots: { customRender: 'uid' }
  },
  {
    title: 'user_name',
    dataIndex: 'user_name',
    width: '10%',
    scopedSlots: { customRender: 'user_name' }
  },
  {
    title: 'nick_name',
    dataIndex: 'nick_name',
    width: '10%',
    scopedSlots: { customRender: 'nick_name' }
  },
  {
    title: 'user_group_name',
    dataIndex: 'user_group_name',
    width: '8%',
    scopedSlots: { customRender: 'user_group_name' }
  },
  {
    title: 'avatar',
    dataIndex: 'avatar',
    width: '5%',
    scopedSlots: { customRender: 'avatar' }
  },
  {
    title: 'signature',
    dataIndex: 'signature',
    width: '15%',
    scopedSlots: { customRender: 'signature' }
  },
  {
    title: 'status',
    dataIndex: 'status',
    width: '6%',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: 'operation',
    dataIndex: 'operation',
    width: '15%',
    scopedSlots: { customRender: 'operation' }
  }
]

const roleColumns = [
  {
    title: 'user_role_path',
    dataIndex: 'user_role_path',
    width: '10%',
    scopedSlots: { customRender: 'user_role_path' }
  },
  {
    title: 'user_role_name',
    dataIndex: 'user_role_name',
    width: '10%',
    scopedSlots: { customRender: 'user_role_name' }
  },
  {
    title: 'user_role_desc',
    dataIndex: 'user_role_description',
    width: '15%',
    scopedSlots: { customRender: 'user_role_description' }
  },
  {
    title: 'operation',
    dataIndex: 'operation',
    width: '8%',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  name: 'UserList',
  components: {
    PageHeaderWrapper,
    userRoleDrawer
  },
  data () {
    return {
      BASE_URL: process.env.VUE_APP_API_BASE_URL,
      columns,
      roleColumns,
      roleList: [],
      data: [],
      searchForm: {
        page: 1,
        user_group_id: '',
        user_name: '',
        groupName: '',
        model: 'user'
      },
      loading: true,
      status: ['未验证', '正常', '封禁'],
      userGroupItems: [],
      form: this.$form.createForm(this),
      visible: false,
      userData: [],
      userRole: [],
      pagination: {
        total: 0,
        onChange: (page) => {
          this.searchForm.page = page
          this.getUserListInfo()
        }
      }
    }
  },
  computed: {
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  mounted () {
    this.getUserListInfo()
  },
  methods: {
    // 搜索列表
    search (type) {
      this.searchForm.page = 1
      this[type]()
    },
    // 获取用户列表
    getUserListInfo () {
      getUserList(this.searchForm).then(res => {
        this.loading = false
        this.data = res.items
        this.pagination.total = res.count ? res.count : 0
      })
    },
    // 搜索用户组
    getUserGroupListInfo (value) {
      getUserGroupList({
        page: 1,
        groupName: value
      }).then(res => {
        this.userGroupItems = res.items
      })
    },
    handleChange (value) {
      for (const userGroupItemsKey in this.userGroupItems) {
        if (this.userGroupItems[userGroupItemsKey].user_group_id === value) {
          this.searchForm.model = parseInt(this.userGroupItems[userGroupItemsKey].user_group_type) === 1 ? 'admin' : 'user'
        }
      }
      this.searchForm.user_group_id = value
      this.search('getUserListInfo')
    },
    // 解封禁用户
    _changeUserStatus (data) {
      data.model = this.searchForm.model
      changeUserStatus(data).then(res => {
        this.$message[res.code === 200 ? 'success' : 'warning'](res.msg)
        if (res.code === 200) data.status = data.status === 2 ? 1 : 2
      })
    },
    // 抽屉关闭
    onClose () {
      this.visible = false
    },
    // 打开 授权左侧页
    showDrawer (data) {
      data.model = this.searchForm.model
      this.userData = data
      this.visible = true
    }
  }
}
</script>

<style scoped>
</style>
